<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">
    
    <script src="http://img.foshanplus.com/js/jquery.js"></script>
    <!-- Echart -->
    <script type="text/javascript" src="http://img.foshanplus.com/js/echarts.min.js" charset="utf-8"></script>

    <title>新闻传播热度</title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        #chart1 {
            width: 100%;
            height: 100%;
        }
        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

</head>

<body style="background-color:transparent;">
    <div id="chart1"></div>


<script type="text/javascript">
var myChart = echarts.init(document.getElementById("chart1"))
$(document).ready(function(){
    var home_data = [
        {name: "皂幕山", value: 1235504},
        {name: "盈香生态园", value: 1169944},
        {name: "美的鹭湖森林度假区", value: 1199996},
        {name: "泰康山生态旅游区", value: 1210379}]

    var myChart = echarts.init(document.getElementById("chart1"))
    var option = generate_option(home_data)
    myChart.setOption(option);
    
})
    function generate_option(scaleData){

        var rich = {
            white: {
                color: '#ddd',
                align: 'center',
                padding: [3, 0]
            }
        };
        var placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };
        var data = [];
        var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
        for (var i = 0; i < scaleData.length; i++) {
            data.push({
                value: scaleData[i].value,
                name: scaleData[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor:color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                name: '',
                itemStyle: placeHolderStyle
            });
        }
        var seriesObj = [{
            name: '',
            type: 'pie',
            // roseType: 'radius',
            clockWise: false,
            radius: [195, 200],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function(params) {
                            var percent = 0;
                            var total = 0;
                            for (var i = 0; i < scaleData.length; i++) {
                                total += scaleData[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if(params.name !== '') {
                                return params.name + '\n{white|' + '占比' + percent + '%}';
                            }else {
                                return '';
                            }
                        },
                        rich: rich
                    },
                    labelLine: {
                        length:30,
                        length2:100,
                        show: true,
                        color:'#00ffff'
                    }
                }
            },
            data: data
        }];
        option = {
            backgroundColor: '#04243E',
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            toolbox: {
                show: false
            },
            series: seriesObj
        }
        return option
    }
</script>

</body>